<template>
  <el-dialog
    class="dia-style"
    title="新增"
    :visible.sync="open"
    :modal-append-to-body="false"

  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="106px"
      label-position="left"
      style="padding-left:54px;padding-top:53px"
    >
      <!-- 工单/事项名称 -->
        <el-form-item label="名称:"  :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            size="small"
            style="width: 370px"
            placeholder="请输入接入系统名称"
          ></el-input>
        </el-form-item>
      <!-- 流程 -->
        <!-- label-width="320px"表头的宽度 -->
       <el-form-item label="API接口地址:"  :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            size="small"
            style="width: 370px;"
            placeholder="请输入接口"
          ></el-input>
        </el-form-item>
      <!-- 工单/事项名称 -->
        <el-form-item label="文件下载地址:"  :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            size="small"
            style="width: 370px;"
            placeholder="请输入接口"
          ></el-input>
        </el-form-item>
        <!-- 情报员图标 -->
          <el-form-item label="情报员图标:"  :label-width="formLabelWidth">
          <el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
  <!-- <span style="margin-top:20px">上传图标</span> -->
<div class="el-upload__tip" slot="tip">只能上传60*60像素的jpg/png文件,且只能上传一张,且不超过500kb</div>

</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
        </el-form-item>
   
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">完 成</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { addDictClassify, updateDictClassify } from '@/api/milkyway/dictManager'
export default {
  props: {
    title: {
      type: String,
      default() {
        return "下发风险预警";
      },
    },
  },
  data() {
    return {
      dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: "100",
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
formLabelWidth:"120px",
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入要素名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入要素来源", trigger: "blur" }],
        sort: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.form;
      },
      set(val) {},
    },
  },
  watch: {},
  created() {},
  methods: {
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file);
      },
    show() {
      this.open = true;
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .dia-style .el-dialog .el-dialog__body {
    padding: 55px;
}
::v-deep .dia-style .el-dialog .el-dialog__body {
padding: 55px !important;
}
.dia-style{
    padding: 55px !important;
}
::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
  
}
::v-deep .el-textarea__inner {
    width: 635px;
    height: 150px;}
</style>
